import { useQuasar } from '@teld/q-components';
import TCard from 't/basic/card';
import TMenu from 't/basic/menu';
import TButton from 't/basic/button';
import TIcon from 't/basic/icon';
import useMappingProps from 't/common/hooks/useMappingProps';
import {
  commonProps,
  fixNameSpace,
  pickOwnForBasicComponent,
} from 't/common/utils';
import {
  computed,
  defineComponent,
  nextTick,
  onMounted,
  provide,
  ref,
  watch,
} from 'vue';
import TInput from '../../basic/input';
import BigSizeComponent from './BigSizeRender';
import DropComponent from './DropRender';
import SmallSizeComponent from './SmallSizeRender';
import useMark,{sysHasMaskAuth} from 't/common/hooks/useMask';
import './index.scss';
export default defineComponent({
  name: fixNameSpace('select-helper'),
  components: {
    TInput,
    BigSizeComponent,
    SmallSizeComponent,
    DropComponent,
    TIcon,
    TButton,
    TMenu,
    TCard,
  },
  props: {
    ...commonProps,
    demo: {
      type: String,
      default() {
        return '';
      },
    },
    simple: {
      type: Boolean,
      default: false,
    },
    multiple: {
      type: Boolean,
      default: false,
    },
    height: {
      type: String,
    },
    position: {
      type: String,
      default: 'bottom',
    },
    historyEnable: {
      type: Boolean,
      default: false,
    },
    dropDownWidth: {
      type: String,
      default: 'auto',
    },
    dropDownWidthStatic: {
      type: String,
      default: '500px',
    },

    search: Function,
    confirm: Function,
    historySaveCount: Number,
    isSingle: Boolean,
    label: String,
    labelField: String,
    lazy: Boolean,
    pagination: Boolean,
    placeholder: String,
    onClear: Function,
    onOpen: Function,
    onOpening: Function,
    title: String,
    value: {
      type: Array || String,
    },
    valueField: String,
    helperCode: String,
    subsidiary: {
      require: false,
      default: '',
      type: String,
    },
    helpConf: Boolean,
    helpTooltip: String,
    required: Boolean,
    helpPlacement: String,
    helpMorePopup: String,
    helpMoreLinkHrefStatic: String,
    helpMoreLinkHrefExp: String,
    readonly: Boolean,
    isDev: Boolean,
    opening: Function,
    openType: String,
    countPerPage: {
      type: Number,
      default: 10,
    },
    searchEnable: {
      default: true,
      type: Boolean,
    },
    visible: {
      default: true,
      type: Boolean,
    },
    showChecked: {
      default: true,
      type: Boolean,
    },
    searchPosition: {
      default: 'top',
      type: String,
    },
    icon: String,
    unit: String,
    maxCheckedLength: {
      type: [String, Number],
      default: '',
    },
    hideLabel: {
      type: Boolean,
      default: false,
    },
    text: {
      type: String || Array,
      default: '',
    },
    borderType: String,

    columns: Array,
    labelPosition: String,
    rules: Array,
    iconEnable: Boolean,
    iconDataSource: String,
    iconFiled: String,
    pageid: String,
    instanceCode: {
      default: window.Funcs&&('select_helper_'+Funcs.Guid().replace(/-/ig,'')),
      type: String,
    },
    valueMapping:Object,
    displayMapping:Object||String,
    tabIndex:Number||String,
    class:String,
    pageSizeRange:Array,
    defaultList:Array,
    maxCountPerPage:[String,Number],
    enableMask: {
      type: Boolean,
      default() {
        return false;
      },
    },
    value_mask: String,
    isMultiseriate:{
      description:'是否多列',
      type: Boolean,
      default() {
        return false;
      },
    },
    columnNumber:{
      description:'多列模式列数',
      type: Number,
      default() {
        return 3;
      },
    },
    dropPosition:{
      description:'多列模式下，弹出位置，可以是跟对输入框展开，也可以顶部展示',
      type: String,
      default() {
        return 'auto';
      },
    },
    columnarPattern:{
      description:'sass定制模式，在多选简单模式下，下拉部分右侧展示一选项目',
      type: Boolean,
      default() {
        return false;
      },
    },
    borderLess:{
      description:'是否展示边框',
      type: Boolean,
      default() {
        return false;
      },
    },
defaultDisplayValue:String,
disable:Boolean
  },
  emits: ['update:value', 'update:text', 'clear', 'opening', 'confirm','dropHide'],

  setup(props, { attrs, emit, expose, slots }) {

    let clientHeight = window.innerHeight + 'px';
    document.documentElement.style.setProperty(
      '--t-client-height',
      clientHeight,
    );

    window.addEventListener('resize', function(event) {
      clientHeight = window.innerHeight+'px';
      document.documentElement.style.setProperty('--t-client-height', clientHeight);

  });
    const refComponent = ref();
    const isCurrentHelper = ref(true);
    const filter = ref('');
    const fieldValue = ref('');
    const fieldValue_mask = ref('');
    let flagFromClick = false;
    const refField = ref(null);
    const refDropComponent = ref(null);
    const _page= ref()
    const _rows= ref()
    const [mappingProps, mappingExpose] = useMappingProps(props);

    let helperInstance = mappingProps.instanceCode
    provide(
      'helperCode_auto',
      mappingProps.pageid + '_' + helperInstance,
    );
    if(!mappingProps.instanceCode||mappingProps.instanceCode.indexOf('select_helper_')==-1){
      mappingProps.instanceCode= window.Funcs&&('select_helper_'+Funcs.Guid().replace(/-/ig,''))
    }

    const _generateValue = computed(() => {
      if (mappingProps.multiple) {
        console.log('mappingProps.multiple', mappingProps.value);
        return JSON.parse(JSON.stringify(mappingProps.value || []));
      } else {
        return mappingProps.value;
      }
    });
    const isShow = computed(() => {
      return refDropComponent?.value?.isShow;
    });
    const isMasked = ref(true)
    const IsMasked = computed(() => {
      return isMasked.value
    })
    const { initMask, maskIconClick } = useMark(mappingProps, '', isMasked)



    expose({
      ...mappingExpose,
      ...{
        modelValue: _generateValue,
        value: _generateValue,
        filterValue: filter,
        filter,
        openHelper: () => {
          let opening = {};

          props.opening && props.opening(opening);
          if (opening.cancel) {
            flagFromClick = false;
            isOpening=false
            return;
          }
          refDropComponent?.value && refDropComponent?.value.show();
        },
        clearValue: () => {
          value.value = [];
        },
        validate: () => {
          return refField.value.validate();
        },
        focus:()=>{
          refField.value?.$el.querySelector('input').focus()
        },
        resetValidation:()=>{
          return refField.value.resetValidation();
        },
        pageIndex:_page,
        pageSize:_rows,
        showMask: (val) => {
          if(!sysHasMaskAuth()||!props.enableMask) return
          isMasked.value = val
        },
        ShowMask: (val) => {
          if(!sysHasMaskAuth()||!props.enableMask) return
          isMasked.value = val
        },
        IsMasked,
        isMasked:IsMasked
      },
      isCurrentHelper,
      isShow,
      hide:()=>{
        refDropComponent?.value && refDropComponent?.value.hide();
      }
    });

    const text = ref(mappingProps.text ? mappingProps.text : '');

    //  const {value} = toRefs(props);
    let value = '';
    const noBorder = ref(mappingProps.borderLess||mappingProps.class?.indexOf('tr-input-noborder')>-1);
    // if(noBorder.value){
    //   mappingProps.style.replace
    // }
  //判断尺寸
  const $q = useQuasar();
    let formSetValue = false;
    if( $q.screen.xs || $q.platform.is.mobile){
      formSetValue = true
      setTimeout(() => {
        formSetValue = false
      }, 500);
    }
    if (mappingProps.multiple) {
      value = ref(mappingProps.value ? mappingProps.value : []);
    } else {
      let obj = {};
      obj[mappingProps.labelField] = mappingProps.text;
      obj[mappingProps.valueField] = mappingProps.value;
      value = ref([obj]);
    }
    let dropWidth = ref();
    if (mappingProps.dropDownWidth == 'static') {
      dropWidth.value = mappingProps.dropDownWidthStatic;
    } else {
      if(mappingProps.columnarPattern){
        dropWidth.value = '720px';
      }else{
        dropWidth.value = 'auto';
      }

    }
    const selectPreview = ref();
    
    const isSearching = ref(false);
    const searchByFilter = (page, rows, filters) => {

      if(mappingProps.pagination){
        _page.value=page
        _rows.value=rows
      }else{
        _page.value=null
        _rows.value=null
      }
      if(mappingProps.defaultList){
        return Promise.resolve({
          List:mappingProps.defaultList
        })
      }
      if (mappingProps.search) {
        isSearching.value = true;
        return new Promise((resolve, reject) => {

          mappingProps.search(
            mappingProps.pagination&&page||null,
            mappingProps.pagination&&rows||null,
            filters ? filters : filter.value,
          ).then(res=>{
            resolve(res)
            isSearching.value = false
          }).catch(err=>{
            Funcs.Notify('提示',err,'warning')
            reject(err)
          })
        });

      }
      return [];
    };
    provide('searchByFilter', searchByFilter);
    onMounted(async () => {
      await nextTick();
      setTimeout(() => {
        if(!refField.value) return
        const mutationsList = [refField.value.$el];
        // 创建一个观察者实例并传入回调函数
        const observer = new MutationObserver((mutationsList, observer) => {
          // 执行代码以响应变化
          FieldWidth.value = refField.value
          ? refField.value.$el
              .querySelector('.q-field__inner')
              .getBoundingClientRect().width+''
          : 0+''
        });

        // 配置观察选项:
        const config = { attributes: true, childList: true, subtree: true };

        // 传入目标节点作为观察者需要观察的DOM
        observer.observe(document.body, config);
      }, 50);
      refField.value.$el&&refField.value.$el.classList.add(mappingProps.instanceCode)
      //如果多列模式

    })
    const FieldWidth =ref()
    FieldWidth.value = refField.value
        ? refField.value.$el
            .querySelector('.q-field__inner')
            .getBoundingClientRect().width+''
        : 0+''
    //  computed(() => {
    //   const width = refField.value
    //     ? refField.value.$el
    //         .querySelector('.q-field__inner')
    //         .getBoundingClientRect().width
    //     : 0;
    //   return width + '';
    // });
    function onClickHandler(params) {}

    const generateValue = computed(() => {
      if (mappingProps.multiple) {
        return JSON.parse(JSON.stringify(mappingProps.value || []));
      } else {
        let data = {
          [mappingProps.labelField]: mappingProps.text,
          [mappingProps.valueField]: mappingProps.value,
        }
        if(mappingProps.enableMask){
          data[mappingProps.labelField+'_mask']=mappingProps.value_mask
        }
        return [
          data
        ];
      }
    });

    
    watch(
      () => generateValue.value,
      () => {
        if (JSON.stringify(value.value) == JSON.stringify(generateValue.value))
          return;

        value.value = generateValue.value;
        formSetValue = true;
      },
    );
    let value_proxy = null;
    if (!mappingProps.isDev) {
      if (mappingProps.multiple) {
        if(!value.value.map){
          value.value = []
        }
        fieldValue.value = value.value
          ? value.value.map(item => item[mappingProps.labelField]).map(items=>(items+'').replace(/,/ig,'，')).join(',')
          : '';
          if(mappingProps.enableMask){
              fieldValue_mask.value = value.value
    ? value.value.map(item => item[mappingProps.labelField+'_mask']).map(items=>(items+'').replace(/,/ig,'，')).join(',')
    : '';
          }


      } else {
        fieldValue.value =
          value.value && value.value[0]&&value.value[0][mappingProps.labelField]
            ? ((value.value[0][mappingProps.labelField])+'').replace(/,/ig,'，')
            : '';
            if(mappingProps.enableMask){
              fieldValue_mask.value =  value.value && value.value[0]&&value.value[0][mappingProps.labelField+'_mask']
              ? ((value.value[0][mappingProps.labelField+'_mask'])+'').replace(/,/ig,'，')
              : '';
          }

      }
    }
    watch(
      () => value.value,
      (newvalue, oldvalue) => {
        if (value_proxy != JSON.stringify(newvalue)) {
          setTimeout(() => {
            if(document.querySelector(`.${mappingProps.instanceCode}.t-popup-proxy`)&&!mappingProps.columnarPattern){
              let target = document.querySelector(`.select_helper_input.${mappingProps.instanceCode}`)
              if(target&&document.querySelector(`.${mappingProps.instanceCode}.t-popup-proxy`)){
                let boundingClientRect = target.getBoundingClientRect()
                if(boundingClientRect.top<document.querySelector(`.${mappingProps.instanceCode}.t-popup-proxy`).offsetTop){
 document.querySelector(`.${mappingProps.instanceCode}.t-popup-proxy`).style.top=`${boundingClientRect.top+boundingClientRect.height}px`
                }

              }

            }
          }, 200);

          if (value.value) {
            if (mappingProps.multiple) {
              value.value.forEach(item => {
                if (!item[mappingProps.labelField]) {
                  let displayMapping = mappingProps.displayMapping;
                  if (typeof displayMapping == 'string') {
                    displayMapping = displayMapping.split('.').pop();
                  } else {
                    displayMapping = displayMapping.DataSource.split('.').pop();
                  }
                  item[mappingProps.labelField] = item[displayMapping]
                }
                if (!item.hasOwnProperty(mappingProps.valueField)) {
                  let valueMapping = mappingProps.valueMapping;
                  if (typeof valueMapping == 'string') {
                    valueMapping = valueMapping.split('.').pop();
                  } else {
                    valueMapping = valueMapping.DataSource.split('.').pop();
                  }
                  item[mappingProps.valueField] = item[valueMapping]
                }
              })
            }
          }
          value_proxy = JSON.stringify(newvalue);
        } else {
          return;
        }
        // if(JSON.stringify(oldvalue)==JSON.stringify(newvalue)) return;
        /**
         * @历史记录
         */
        if (value.value.length == 0) {
          emit('update:value', mappingProps.multiple ? [] : null);
          emit('update:text', '');
          if(mappingProps.enableMask){
            emit('update:value_mask', '');
          }
          emit('clear');
          //return
        }

        if (mappingProps.historyEnable && !formSetValue) {
          //缓存标识
          let helperCode =
            mappingProps.helperCode ||
            mappingProps.pageid + '_' + helperInstance;
          let key = 'select_helper_generate_code';
          let historyList = localStorage.getItem(`${key}_${helperCode}`);
          if (historyList) {
            historyList = JSON.parse(historyList)||[];
          } else {
            historyList = [];
          }
          historyList = historyList.filter(
            item =>
              !value.value.some(
                val =>
                  item[mappingProps.valueField] == val[mappingProps.valueField],
              ),
          );
          value.value = value.value.filter(
            item =>
              !(
                !item[mappingProps.labelField] && !item.hasOwnProperty(mappingProps.valueField)
              ),
          );
          historyList = [].concat(value.value, historyList);
          historyList = historyList.slice(
            0,
            mappingProps.historySaveCount ? mappingProps.historySaveCount : 5,
          );
          localStorage.setItem(
            `${key}_${helperCode}`,
            JSON.stringify(historyList),
          );
          // Funcs.GetUserProfile({
          //   Key: 'select_helper_generate_code',
          //   DynamicKey: helperCode,
          // });
          // Funcs.SetUserProfile(
          //   {
          //     Key: 'select_helper_generate_code',
          //     DynamicKey: helperCode,
          //   },
          //   '我是测试写入001',
          // );
        }
        if (mappingProps.isDev) return;
        if (mappingProps.multiple) {
          fieldValue.value = value.value&&value.value.map
            ? value.value.map(item => item[mappingProps.labelField]).map(items=>items.replace(/,/ig,'，')).join(',')
            : '';
            if(mappingProps.enableMask){
               fieldValue_mask.value= value.value&&value.value.map
            ? value.value.map(item => item[mappingProps.labelField+'_mask']).map(items=>items.replace(/,/ig,'，')).join(',')
            : '';
            }

          if (!formSetValue) {
            emit('update:value', value.value);
            emit('update:text', fieldValue.value);
            if(mappingProps.enableMask){
              emit('update:value_mask', fieldValue_mask.value);
            }
            emit('confirm', value.value);
          }
        } else {
          debugger;
          fieldValue.value =
            value.value && value.value[0]&&value.value[0][mappingProps.labelField]
              ? (value.value[0][mappingProps.labelField]+'').replace(/,/ig,'，')
              : '';
              if(mappingProps.enableMask){
              fieldValue_mask.value= value.value && value.value[0]&&value.value[0][mappingProps.labelField+'_mask']
              ? (value.value[0][mappingProps.labelField+'_mask']+'').replace(/,/ig,'，')
              : '';}
          if (!formSetValue) {
            emit(
              'update:value',
              value.value[0] ? value.value[0][mappingProps.valueField] : '',
            );
            emit('update:text', fieldValue.value);
            if(mappingProps.enableMask){
              emit('update:value_mask', fieldValue_mask.value);
            }
            emit('confirm', value.value[0] ? value.value[0] : null);
          }
        }
        if (!mappingProps.simple && refDropComponent?.value) {
          filter.value = '';
        }
        if (formSetValue) {
          formSetValue = false;
        }
      },
      {
        deep: true,
      },
    );
    const renderContent = () => {
      if (mappingProps.readonly) {
        return '';
      }

      if (!($q.screen.xs||$q.platform.is.mobile)) {
        return (
          <big-size-component
          columnarPattern={mappingProps.columnarPattern}
          dropPosition={mappingProps.dropPosition}
            ref={refDropComponent}
            isMultiseriate={mappingProps.isMultiseriate}
            columnNumber={mappingProps.columnNumber}
            ref={refDropComponent}
            multiple={mappingProps.multiple}
            simple={mappingProps.simple}
            width={FieldWidth.value}
            historyEnable={mappingProps.historyEnable}
            dropWidth={dropWidth.value}
            dropDownWidth={mappingProps.dropDownWidth}
            v-model:checkList={value.value}
            columns={mappingProps.columns}
            valueField={mappingProps.valueField}
            labelField={mappingProps.labelField}
            helperCode={mappingProps.helperCode}
            filter={filter.value}
            onUpdate:filter={e => {filter.value=e}}
            countPerPage={mappingProps.countPerPage}
            pagination={mappingProps.pagination}
            onClose={() => {
              filter.value = '';
              isOpening.value = false;
              emit('dropHide')
            }}
            iconEnable={mappingProps.iconEnable}
            iconDataSource={mappingProps.iconDataSource}
            iconFiled={mappingProps.iconFiled}
            instanceCode={mappingProps.instanceCode}
            pageSizeRange={mappingProps.pageSizeRange}
            maxCountPerPage={mappingProps.maxCountPerPage}
          ></big-size-component>
        );
      } else {
        if (mappingProps.openType == 'dropdown') {
          return (
            <drop-component
              filter={filter.value}
              ref={refDropComponent}
              multiple={mappingProps.multiple}
              simple={mappingProps.simple}
              width={FieldWidth.value}
              height={mappingProps.height}
              position={mappingProps.openType}
              historyEnable={mappingProps.historyEnable}
              placeholder={mappingProps.placeholder}
              columns={mappingProps.columns}
              valueField={mappingProps.valueField}
              labelField={mappingProps.labelField}
              v-model:checkList={value.value}
              searchEnable={mappingProps.searchEnable}
              searchPosition={mappingProps.searchPosition}
              subsidiary={mappingProps.subsidiary}
              countPerPage={mappingProps.countPerPage}
              pagination={mappingProps.pagination}
              onClose={() => {
                // refDropComponent?.value&& refDropComponent?.value.close()
                isOpening.value = false;
                emit('dropHide')
                filter.value = '';
              }}
              iconEnable={mappingProps.iconEnable}
              iconDataSource={mappingProps.iconDataSource}
              iconFiled={mappingProps.iconFiled}
              historyEnable={mappingProps.historyEnable}
              helperCode={mappingProps.helperCode}
              maxCheckedLength={mappingProps.maxCheckedLength}
              showChecked={mappingProps.showChecked}
            v-model:isCloseIng={isCloseIng.value}

            ></drop-component>
          );
        }
        return (
          <small-size-component
            ref={refDropComponent}
            multiple={mappingProps.multiple}
            simple={mappingProps.simple}
            width={FieldWidth.value}
            height={mappingProps.height}
            position={mappingProps.openType}
            historyEnable={mappingProps.historyEnable}
            placeholder={mappingProps.placeholder}
            columns={mappingProps.columns}
            valueField={mappingProps.valueField}
            labelField={mappingProps.labelField}
            label={mappingProps.label}
            v-model:checkList={value.value}
            searchEnable={mappingProps.searchEnable}
            searchPosition={mappingProps.searchPosition}
            subsidiary={mappingProps.subsidiary}
            countPerPage={mappingProps.countPerPage}
            pagination={mappingProps.pagination}
            v-model:isCloseIng={isCloseIng.value}
            onClose={() => {
              filter.value = '';
              isOpening.value = false;
              emit('dropHide')
            }}
            iconEnable={mappingProps.iconEnable}
            iconDataSource={mappingProps.iconDataSource}
            iconFiled={mappingProps.iconFiled}
            historyEnable={mappingProps.historyEnable}
            helperCode={mappingProps.helperCode}
            maxCheckedLength={mappingProps.maxCheckedLength}
            showChecked={mappingProps.showChecked}
          ></small-size-component>
        );
      }
    };

    const isFocus = ref(false);
    let targetIndex = null;
    //临时定时器，多选单行展示的时候hover 打开 emun 并且移入不关闭
    const delayTime = ref(null);
    onMounted(async () => {
      //强制转换为false。暂时不启用这个模式
      mappingProps.isMultiseriate = false
      await nextTick();
      if (
        ((mappingProps.multiple && !mappingProps.isSingle) || true) &&
        !mappingProps.isDev&&  refField.value
      ) {
        // 春辉，我先把这段代码放到 css 中了，发一版看看效果
        refField.value.$el.querySelector(
          '.q-field__control-container.col.relative-position.row.no-wrap.q-anchor--skip',
        ).style.display = 'none';
        refField.value.$el.querySelector(
          '.q-field__prepend.q-field__marginal.row.no-wrap.items-center',
        ).style.flex = '1';
        if (
          refField.value.$el.querySelector(
            '.tr-input-default .q-field--dense .q-field__control',
          )
        ) {
          refField.value.$el.querySelector(
            '.tr-input-default .q-field--dense .q-field__control',
          ).style.height = 'auto';
          refField.value.$el.querySelector(
            '.tr-input-default .q-field--dense .q-field__control',
          ).style.minHeight = '32px';
        }

        refField.value.$el.querySelector(
          '.tr-input-default .q-field--dense .q-field__marginal',
        )
          ? (refField.value.$el.querySelector(
              '.tr-input-default .q-field--dense .q-field__marginal',
            ).style.height = 'auto')
          : '';
      }
      refField.value&&refField.value.$el.addEventListener('keydown',async e => {
        // console.log(e.target.nodeName);
          if (!e||mappingProps.readonly) return;
          if (e.shiftKey && e.key === 'Tab'&&refDropComponent?.value?.isShow) {
            refDropComponent?.value.close()
            e&&e.stopPropagation();
            e&&e.preventDefault();
            return false
        }
          let trList = document.querySelectorAll(
            `.${mappingProps.instanceCode} tbody tr`,
          );

          let activeIndex = document.querySelector(
            `.${mappingProps.instanceCode} tbody tr.active`,
          );

          console.log(e);
          //回车

          /**
           * @上 38
           * @下 40
           * @左 37
           * @右 39
           */
          // $0.querySelectorAll('tr')[10].scrollIntoView({behavior: "smooth", block: "end"})

          if (e.keyCode == 13) {
            if(isSearching.value) return
            if (refDropComponent?.value?.isShow) {

              if(trList.length==1){
                if(document.querySelector( `.${mappingProps.instanceCode} tbody tr.select_helper_popup_table_tr_checked`)) return document
                .querySelector(
                  `.${mappingProps.instanceCode} .select_helper_popup_foot button:nth-child(2)`,
                )?.click();
                if(!activeIndex){
                  activeIndex = trList[0]
                  if(mappingProps.multiple){
                    activeIndex && activeIndex.click();
                  }
                }
              }

              if (mappingProps.multiple) {
                document
                .querySelector(
                  `.${mappingProps.instanceCode} .select_helper_popup_foot button:nth-child(2)`,
                )?.click();
                isOpening.value=false
                if(activeIndex){
                  filter.value=''
                }else{
                  filter.value=''
                  refDropComponent?.value?.hide()
                }
                e&&e.stopPropagation();
                e&&e.preventDefault();
                return false
              } else {
                window.formEnterKey=true
                activeIndex && activeIndex.click();
                setTimeout(() => {
                  activeIndex && activeIndex.click();
                },10);
              }
              if(activeIndex){
                filter.value=''
              }else{
                filter.value=''
                refDropComponent?.value?.hide()
              }
              if(mappingProps.columnarPattern&&mappingProps.simple&&mappingProps.multiple){
                document
                .querySelector(
                  `.${mappingProps.instanceCode} .select_helper_popup_foot button:nth-child(2)`,
                )?.click();
              }
              e&&e.stopPropagation();
              e&&e.preventDefault();
              return false;
            } else {
              isCurrentHelper.value = false;
              await nextTick();
              isCurrentHelper.value = true
              await nextTick();
              targetIndex = null;
              refDropComponent?.value && refDropComponent?.value.show();
              setTimeout(() => {
                e.target.focus();
              }, 300);
            }
            e&&e.stopPropagation();
            // e.preventDefault()
            return false;
          } else if (e.keyCode == 38) {
            //上
            if (!activeIndex) {
              targetIndex == null && (targetIndex = 0);
              if (trList[targetIndex - 1]) {
                targetIndex--;
              }
              trList[targetIndex] &&
                trList[targetIndex].classList.add('active');

            }else if (activeIndex.previousElementSibling) {
              activeIndex.classList.remove('active');
              activeIndex = activeIndex.previousElementSibling;
              console.log(11111, activeIndex);
              activeIndex && activeIndex.classList.add('active');
              activeIndex.scrollIntoView({ behavior: 'smooth', block: 'end' });
              targetIndex--;
            }
            e&&e.stopPropagation();
            e&&e.preventDefault();
            return false;
          } else if (e.keyCode == 40) {
            //下
            if (!activeIndex) {
              targetIndex == null && (targetIndex = -1);
              if (trList[targetIndex + 1]) {
                targetIndex++;
              }
              trList[targetIndex] &&
                trList[targetIndex].classList.add('active');
            } else {
              if (activeIndex.nextElementSibling) {
                activeIndex.classList.remove('active');
                activeIndex = activeIndex.nextElementSibling;
                activeIndex && activeIndex.classList.add('active');
                activeIndex.scrollIntoView({
                  behavior: 'smooth',
                  block: 'end',
                });
                targetIndex++;
              }
            }
            e&&e.stopPropagation();
            e&&e.preventDefault();
            return false;
          } else if (e.keyCode == 32) {
            if (refDropComponent?.value.isShow && !mappingProps.multiple) return;

            if (activeIndex) {
              activeIndex.click();
              setTimeout(()=>{
                activeIndex && activeIndex.classList.add('active');
              })

            }
            e&&e.stopPropagation();
            e&&e.preventDefault();
            return false;
          } else if (e.keyCode == 8) {
            if (filter.value.length == 0) {
              value.value.pop();
              e&&e.stopPropagation();
              e&&e.preventDefault();
              return false;
            }
          } else if (e.keyCode == 9) {
            if (refDropComponent?.value.isShow) {
              refDropComponent?.value.hide();
              e&&e.stopPropagation();
              e&&e.preventDefault();
              return false;
            }
          } else if ((e.ctrlKey || e.metaKey) && e.keyCode == 39) {
            debugger;
            if (mappingProps.simple) return;
            let btn = null;
            try {
              btn = document.querySelector(
                `.${mappingProps.instanceCode} .q-table__control:nth-last-child(1) button:nth-last-child(2)`,
              );
            } catch (error) {}
            if (btn) {
              btn.click();
              e&&e.stopPropagation();
              e&&e.preventDefault();
              return false;
            }
            //下一页
          } else if ((e.ctrlKey || e.metaKey) && e.keyCode == 37) {
            debugger;
            if (mappingProps.simple) return;
            //上一页
            let btn = null;
            try {
              btn = document.querySelector(
                `.${mappingProps.instanceCode} .q-table__control:nth-last-child(1) button:nth-last-child(3)`,
              );
            } catch (error) {}
            if (btn) {
              btn.click();
              e&&e.stopPropagation();
              e&&e.preventDefault();
              return false;
            }
          }
        });

        refField.value&&refField.value.$el.addEventListener('keyup', e => {
          if (!e) return;
        //删除
        if (
          e.keyCode == 13  ) {
            if(mappingProps.multiple){
              if(window.closeDropMutil){
                window.clearTimeout(window.closeDropMutil)
                window.closeDropMutil=null
              }
              window.closeDropMutil = window.setTimeout(()=>{
                refDropComponent.value&&refDropComponent.value.close()
              },10)
            }
          e&&e.stopPropagation();
          e&&e.preventDefault();
          return false;
        }
      });
    });

    const clearAllHelper = exclude => {
      //debugger
      if (window.selectHelperList) {
        for (let key in window.selectHelperList) {
          key !== exclude && (window.selectHelperList[key].value = false);
        }
      }
    };
    const isCloseIng = ref(false);
    watch(()=>isCloseIng.value,(newVal,oldVal)=>{
      if(isCloseIng.value){
        setTimeout(() => {
          isCloseIng.value=false
        }, 1000);

      }
    })
    const isOpening = ref(false);
    // const openDelay = ref(null);
    const openHelperByUserOperate =  async (e, formFocus,notOpenPanel) => {
     
      // debugger
      if (isCloseIng.value||mappingProps.readonly) return;
      
      if(!window.selectHelperOpenPanel){
        window.selectHelperOpenPanel={}
      }
      if (window.selectHelperOpenPanel) {
        for (let key in window.selectHelperOpenPanel) {
          if(key !== mappingProps.instanceCode){
            window.selectHelperOpenPanel[key].isCloseIng.value=true
            window.selectHelperOpenPanel[key].isOpening.value = false

            setTimeout(() => {
              window.selectHelperOpenPanel[key].isCloseIng.value=false
            }, 500);
          }
         
        }
      }
      if(! window.selectHelperOpenPanel[mappingProps.instanceCode]){
        window.selectHelperOpenPanel[mappingProps.instanceCode] = {}
      }
      window.selectHelperOpenPanel[mappingProps.instanceCode].isOpening = isOpening
      window.selectHelperOpenPanel[mappingProps.instanceCode].isCloseIng=isCloseIng
      if (
        refDropComponent?.value &&
        refDropComponent?.value != null &&
        refDropComponent?.value.hasOwnProperty('isShow') &&
        refDropComponent?.value.isShow
      ) {
        return;
      }
      if((mappingProps.columnarPattern&&mappingProps.simple)||noBorder.value){
        isOpening.value = true;
      }
      // if(!refDropComponent?.value.isShow){
      //   isOpening.value = true;
      // }
      isCurrentHelper.value = false;
      
      if(window.reFocuse){
        window.clearTimeout( window.reFocuse);
        window.openDelay= null;
      }
      if (window.openDelay) {
        return
        window.clearTimeout(window.openDelay);
        window.openDelay= null;
      }
      isCurrentHelper.value = true
      targetIndex = null;
      clearAllHelper(mappingProps.instanceCode);
      isCurrentHelper.value = true;
      flagFromClick = true;
      let opening = {};
      mappingProps.opening && mappingProps.opening(opening);
      if (opening.cancel) {
        flagFromClick = false;
        isOpening.value=false
       e&&e.stopPropagation&&e.stopPropagation();
       e&&e.stopPropagation&&e.preventDefault();
  
        isCloseIng.value=true
        setTimeout(() => {
          isCloseIng.value=false
        }, 500);
        return false;
      }
      if (!window.selectHelperList) {
        window.selectHelperList = {};
      }
      if (
        refDropComponent?.value &&
        refDropComponent?.value != null &&
        refDropComponent?.value.hasOwnProperty('isShow') &&
        !refDropComponent?.value.isShow
      ) {
        refDropComponent?.value && refDropComponent?.value.close();
      }
      // refDropComponent?.value.isShow=true
      await nextTick();
      window.selectHelperList&&(window.selectHelperList[mappingProps.instanceCode] = isCurrentHelper) ;
      if(!notOpenPanel||!mappingProps.columnarPattern){
        refDropComponent?.value && refDropComponent?.value.show();
      }

      if (!($q.screen.xs||$q.platform.is.mobile) && formFocus && !isFocus.value) {
        e&&e.stopPropagation&&e.stopPropagation();
        // if(mappingProps.columnarPattern&&!refDropComponent?.value?.isShow){
        //   isFocus.value = true;
        // }
        window.reFocuse = window.setTimeout(() => {
          isFocus.value = true;
          flagFromClick = false;
          e&&e.target?e.target.focus():e.focus?e.focus():'';
        }, 500);
        return false;
      } else {
        flagFromClick = false;
      }
      window.openDelay = window.setTimeout(async () => {
        window.clearTimeout(window.openDelay);
        window.openDelay= null;
       
      }, 400);
    };
    const _fieldValue = computed(() => {
      if (mappingProps.isDev) return '';
      return fieldValue.value;
    });
    const filterProxy =  computed(()=>{

      if(initMask()&&mappingProps.readonly&&isMasked.value){
       return fieldValue_mask.value
      ? fieldValue_mask.value.split(',')
      : [];
      }
      return fieldValue.value
      ? fieldValue.value.split(',')
      : [];
    })
    const getCharacterWidth = (char, font='14px')=> {
      const canvas = document.createElement('canvas');
      const context = canvas.getContext('2d');
      context.font = font;
      context.FontFamily = `AlibabaPuHuiTi, Arial, Roboto`
      const metrics = context.measureText(char);
      return metrics.width;
    }
    const fixTagsNum = (_filter,nextFilterString,Template,filterString)=>{
      if (
        getCharacterWidth(nextFilterString)+(Template.length*1+1)*20>(FieldWidth.value - 130)
      ) {
        if(
        getCharacterWidth(filterString+ $q.lang.selectHelper.etc +_filter.length +(mappingProps.unit ? mappingProps.unit : ''))+(Template.length*1+2)*20>(FieldWidth.value - 130))
          {
            if (Template.length == 1) {
              return true
            }
            Template.pop()
            let targetString  = _filter[Template.length].toString()
            let _proxyFilterString = filterString.slice(0,filterString.length-targetString.length)

            fixTagsNum(_filter,filterString,Template,_proxyFilterString)
            return true
        }
        return true
      }
      return false
    }
    return () => {
      return (
        <t-input
          {...pickOwnForBasicComponent(mappingProps, TInput.props)}
          stack-label
          clearable={false}
          borderType={'borderless'}
          v-model:modelValue={_fieldValue.value}
          onClick={e => {
            if(!isOpening.value){
              window.selectHelperList&&window.selectHelperList[mappingProps.instanceCode]&&(window.selectHelperList[mappingProps.instanceCode].value = false) ;
              openHelperByUserOperate(e);
            }
         
            e&&e.stopPropagation();
            e&&e.preventDefault();
            return false;
          }}
          ref={refField}

          onFocus={e => {
            //  openHelperByUserOperate(e, true);
            if( window.openHelperDelay){
              window.clearTimeout(window.openHelperDelay)
              window.openHelperDelay=null
            }
            window.openHelperDelay = window.setTimeout(() => {
              e.target.querySelector('.select_helper_input_inner') &&
                e.target.querySelector('.select_helper_input_inner').focus();
            }, 500);

            if (!($q.screen.xs||$q.platform.is.mobile)) {
              e&&e.stopPropagation();
              e&&e.preventDefault();
              return false;
            }
          }}
          onBlur={() => {
            if (flagFromClick) {
              return;
            }
            isFocus.value = false;
            // filter.value = '';
          }}

          class={`select_helper_input ${mappingProps.class?mappingProps.class:''} ${mappingProps.isMultiseriate&&mappingProps.dropPosition=='top'&&!($q.screen.xs||$q.platform.is.mobile)?'select_helper_input_multiseriate_dropPosition_top':''} ${!isOpening.value&&mappingProps.columnarPattern&&mappingProps.borderLess&&mappingProps.multiple&&!($q.screen.xs||$q.platform.is.mobile)?'select_helper_input_multiseriate':''} ${mappingProps.readonly?'select_helper_input_readonly':' '} ${isOpening.value?'select_helper_isOpening':''} `}
          // && !isFocus.value 20250113 刁春辉移除 领导要求有数据不展示placeholder
          placeholder={
            mappingProps.readonly || (mappingProps.multiple&&fieldValue.value&& fieldValue.value.length)||(!mappingProps.multiple&&fieldValue.value)
              ? ''
              : mappingProps.placeholder
          }
          labelPosition={mappingProps.labelPosition}
          borderType='outlined'
          onKeyUp={e => {
            console.log(e);
          }}


          rules={mappingProps.rules}
        >
          {{
            prepend: () => {
              if (mappingProps.isDev&&!mappingProps.isMultiseriate&&!mappingProps.columnarPattern) return '';
              if(mappingProps.columnarPattern&&(isOpening.value)&&mappingProps.multiple&&!($q.screen.xs||$q.platform.is.mobile)){


                if( window.openHelperDelay){
                  window.clearTimeout(window.openHelperDelay)
                  window.openHelperDelay=null
                }
                // setTimeout(() => {
                //   openHelperByUserOperate(refField.value?.$el.querySelector('input'), true);
                // }, 200);
                window.openHelperDelay = window.setTimeout(() => {
                  refField.value?.$el.querySelector('input') &&
                  refField.value?.$el.querySelector('input').focus();
                  openHelperByUserOperate(refField.value?.$el.querySelector('input'), true);
                }, 400);


                return  <input
                style={
                  ((mappingProps.multiple && mappingProps.isSingle
                    ? 'min-width:0;'
                    : '') + mappingProps.readonly
                    ? 'background:rgba(0,0,0,0);'
                    : '') +
                  'border:0;outline:0;height: 26px;line-height: 26px; width:100%;font-size:14px;;    flex: 1;min-width:10px;color:rgba(0,0,0,.8);'
                }

                tabindex={mappingProps.tabIndex||mappingProps.tabIndex==0?mappingProps.tabIndex:0}
                // && !isFocus.value
                placeholder={mappingProps.readonly ? '' : noBorder.value?(fieldValue.value|| mappingProps.placeholder):( mappingProps.placeholder)}
                readonly={mappingProps.readonly||$q.screen.xs||$q.platform.is.mobile}
                class={'select_helper_input_inner q-placeholder'}
                fieldValue={fieldValue.value}
                v-model={filter.value}
                onClick={e => {
                  if($q.screen.xs||$q.platform.is.mobile){
                    openHelperByUserOperate(e, true);
                  }
                  e&&e.stopPropagation();
                  e&&e.preventDefault();
                  return false;
                }}
                onFocus={e => {
                  e&&e.stopPropagation();
                  e&&e.preventDefault();
                  return false;
                }}
                onBlur={(e) => {
                  e&&e.stopPropagation();
                  e&&e.preventDefault();
                  return false;
                }}
              />
              }
              return (
                <span
                  style={`position:relative;font-size:12px;color: rgba(0, 0, 0, var(--t-color-opacity, /*批量处理90%透明度*/0.9));width:100%;display:flex;flex-wrap:wrap;align-items:center`}
                  onClick={e => {
                    openHelperByUserOperate(refField.value?.$el.querySelector('input'), true)
                    e&&e.stopPropagation();
                    e&&e.preventDefault();
                    return false;
                  }}
                >
                  {/* {fieldValue.value} */}
                  {(() => {

                    let _filter = filterProxy.value
                    let Template = [];
                    let filterLengeth = 0;
                    let filterString = '';
                    if (_filter.length >0 && fieldValue.value) {
                      if(!(noBorder.value&&isOpening.value)||($q.screen.xs||$q.platform.is.mobile)){
                        let isStop = false;
                        _filter.forEach((item, index) => {
                          filterLengeth += item.toString().length * 1 + 1;
                          filterString += item.toString() ;
                          if (
                            mappingProps.multiple &&
                            mappingProps.isSingle &&_filter.length!=1&&
                            getCharacterWidth(filterString)+(Template.length*1+1)*14>(FieldWidth.value - 10)||isStop
                          ) {
                            return;
                          }
                          Template.push(
                            <span
                              class={
                                mappingProps.readonly
                                  ? 'select_helper_tag select_helper_tag_readonly'
                                  : 'select_helper_tag'
                              }
                              style={
                              ( _filter.length==1&&($q.screen.xs||$q.platform.is.mobile))&&noBorder.value?'margin-right:0;max-width:100%':''
                            }
                              onClick={e => {
                                if(e){
                                  e.stopPropagation()
                                  e.preventDefault()
                                }
                                if(mappingProps.columnarPattern){
                                 
                                  //return false
                                }
                                openHelperByUserOperate(refField.value?.$el.querySelector('input'), true)
                                return false
                              }}
                            >
                              <span class={'select-tag'} title={item}>
                              {item}
                              </span>
                              {(() => {
                                if (($q.screen.xs||$q.platform.is.mobile)&&!mappingProps.readonly) {
                                  return '';
                                }
                                if (index == _filter.length - 1) {
                                  if(mappingProps.isMultiseriate){
                                    return ''
                                  }
                                  return <i></i>;
                                } else {
                                  return <i>,</i>;
                                }
                              })()}
  
                              <t-button
                                style={
                                  ($q.screen.xs||$q.platform.is.mobile)
                                    ? `font-size:8px;;${mappingProps.readonly ? '' : 'display:inline-flex !important;'};margin-left: 2px;margin-right: 4px;`
                                    : 'font-size:8px;;margin-left: 2px;margin-right: 4px;'
                                }
                                flat
                                round
                                dense
                                icon='clear'
                                onClick={e => {
                                  value.value.splice(index, 1);
                                  /**
                                   * BUG20241226163159944 【知识资产】【移动端】【创建tab】新建用户需求规格界面中，在关联需求中已存在数据时，直接点击数据右侧的删除图标，此时点击后进入关联需求列表界面，且此时弹出软键盘
                                   */
                                  if(!($q.screen.xs||$q.platform.is.mobile)&&!mappingProps.isMultiseriate&&!mappingProps.columnarPattern){
                                    setTimeout(()=>{
                                      // refField.value?.$el.querySelector('input').focus()
                                     // setTimeout(() => {
  
                                        openHelperByUserOperate(refField.value?.$el.querySelector('input'), true,true)
                                     // }, 200);
  
                                    },100)
                                  }
  
  
                                  if(e){
                                    e.stopPropagation()
                                    e.preventDefault()
                                    return false
                                  }
                                }}
                              />
                            </span>,
                          );
                          if(Template.length<=_filter.length&&_filter[index+1]){
                            let nextFilterString = filterString+_filter[index+1].toString()
                            if(mappingProps.multiple &&mappingProps.isSingle ){
                                isStop = fixTagsNum(_filter,nextFilterString,Template,filterString)
                              }
  
                          }
                        });
                        if (
                          mappingProps.multiple &&
                          mappingProps.isSingle &&
                          Template.length < _filter.length&&_filter.length!=1
                        ) {
                          Template.push(
                            <span
                            style={'margin:0'}
                              class='select_helper_tag'
                              onMouseenter={() => {
                                if (delayTime.value) {
                                  window.clearTimeout(delayTime.value);
                                  delayTime.value = null;
                                }
                                selectPreview.value.show();
                              }}
                              onMouseleave={() => {
                                if (!delayTime.value) {
                                  delayTime.value = window.setTimeout(() => {
                                    selectPreview.value.hide();
                                  }, 300);
                                }
                              }}
                            >
                              <span style={'position:relative;font-style:normal'}>
                              {$q.lang.selectHelper.etc +
                                _filter.length +
                                (mappingProps.unit ? mappingProps.unit : '')}
                              </span>
  
                                <span style={`position: absolute;
                                              left: -8px;
                                              right: -22px;
                                              top: 0;
                                              bottom: -4px;
                                              z-index: -1;`}
                                              >
                                <t-menu
                                ref={selectPreview}
                                class='select_helper_popup'
                                maxHeight='300px'
                                width="100%"
                                style='border-radius:12px;overflow:hidden'
                              >
                                <div style={'max-height:280px;overflow-y:auto;'}>
                                <t-card
                                  style={`width:${FieldWidth.value}px;border:0;box-shadow:0 0 0 0;outline:0;`}
                                  onMouseenter={() => {
                                    if (delayTime.value) {
                                      window.clearTimeout(delayTime.value);
                                      delayTime.value = null;
                                    }
                                  }}
                                  onMouseleave={() => {
                                    if (!delayTime.value) {
                                      delayTime.value = window.setTimeout(() => {
                                        selectPreview.value.hide();
                                      }, 300);
                                    }
                                  }}
                                >
                                  <t-card-section >
                                    {(() => {
                                      let Template = [];
                                      _filter.forEach((item, index) => {
                                        Template.push(
                                          <span
                                            class='select_helper_tag'
                                            style={
                                              'line-height:24px;display:inline-block;padding-left:6px;padding-top:0px;' + (_filter.length == 1 && ($q.screen.xs || $q.platform.is.mobile) && noBorder.value) ? 'margin-right:0;max-width:100%' : ''
                                            }
                                          >
                                            <span class={'select-tag'} title={item}>
                                            {item}
                                            </span>
  
                                            {(()=>{
                                              if(mappingProps.readonly){
                                                if(_filter.length-1==index){
                                                  return ''
                                                }
                                                return ','
                                              }
                                              return   <t-button
                                              style='font-size:8px;margin-top:-4px'
                                              flat
                                              round
                                              dense
                                              icon='clear'
                                              onClick={e => {
                                                value.value.splice(index, 1);
                                              }}
                                            />
                                            })()}
  
                                          </span>,
                                        );
                                      });
                                      return Template;
                                    })()}
                                  </t-card-section>
                                </t-card>
                                </div>
  
                              </t-menu>
                                </span>
  
                            </span>,
                          );
                        }
                      }
                     
                    }else if(noBorder.value||(mappingProps.isMultiseriate||(mappingProps.columnarPattern&&mappingProps.borderLess&&mappingProps.multiple))){
                      if(isOpening.value&&!mappingProps.columnarPattern&&!noBorder.value){
                       
                      }else{
                        Template.push(
                          <span
                            class='select_helper_tag select_helper_tag_readonly default'
                            style={
                              (($q.screen.xs||$q.platform.is.mobile)&&noBorder.value)?'margin-right:0;':''
                            }
                           
                          >
                            <span onClick={
                              e => {
                                if(e){
                                  e.stopPropagation()
                                  e.preventDefault()
                                }
                                refDropComponent?.value && refDropComponent?.value.show();
                                return false
                              }
                            } class={'select-tag'} title={mappingProps.defaultDisplayValue||$q.lang.quickFilter.all}>
                            {mappingProps.defaultDisplayValue|| $q.lang.quickFilter.all}
                            </span>
                            {(() => {
                              if (($q.screen.xs||$q.platform.is.mobile)&&!mappingProps.readonly) {
                                return '';
                              }
  
                            })()}
  
                            <t-button
                              style={
                                ($q.screen.xs||$q.platform.is.mobile)
                                  ? `font-size:8px;;${mappingProps.readonly ? '' : 'display:inline-flex !important;'};margin-left: 2px;margin-right: 4px;`
                                  : 'font-size:8px;;margin-left: 2px;margin-right: 4px;'
                              }
                              flat
                              round
                              dense
                              icon='clear'
                              onClick={e => {
                                value.value.splice(index, 1);
                                /**
                                 * BUG20241226163159944 【知识资产】【移动端】【创建tab】新建用户需求规格界面中，在关联需求中已存在数据时，直接点击数据右侧的删除图标，此时点击后进入关联需求列表界面，且此时弹出软键盘
                                 */
                                if(!($q.screen.xs||$q.platform.is.mobile)&&!mappingProps.isMultiseriate){
                                  setTimeout(()=>{
                                    // refField.value?.$el.querySelector('input').focus()
                                   // setTimeout(() => {
  
                                      openHelperByUserOperate(refField.value?.$el.querySelector('input'), true,true)
                                   // }, 200);
  
                                  },100)
                                }
  
                                if(e){
                                  e.stopPropagation()
                                  e.preventDefault()
                                  return false
                                }
                              }}
                            />
                          </span>,
                        );
                      }
                      
                    }
                    if (
                      !mappingProps.isDev &&
                      
                      (!mappingProps.readonly ||
                        (mappingProps.readonly && !fieldValue.value))&&(!noBorder.value||(noBorder.value&&isOpening.value&&!mappingProps.columnarPattern)&&!($q.screen.xs||$q.platform.is.mobile))
                    ) {
                      Template.push(
                        <input
                          style={
                            ((mappingProps.multiple && mappingProps.isSingle
                              ? 'min-width:0;'
                              : '') + mappingProps.readonly
                              ? 'background:rgba(0,0,0,0);'
                              : '') +
                            'border:0;outline:0;height: 26px;line-height: 26px; width:100%;font-size:14px;;    flex: 1;min-width:10px;'
                          }
                          tabindex={mappingProps.tabIndex||mappingProps.tabIndex==0?mappingProps.tabIndex:0}
                          // && !isFocus.value
                          placeholder={
                            (mappingProps.readonly||(!noBorder.value&&fieldValue.value.length)) ? '' : fieldValue.value||mappingProps.placeholder
                          }
                          fieldValue={fieldValue.value}
                          readonly={mappingProps.readonly||$q.screen.xs||$q.platform.is.mobile}
                          class={'select_helper_input_inner q-placeholder'}
                     
                          v-model={filter.value}
                          onClick={e => {
                            if(isOpening.value){
                            }else{
                              if($q.screen.xs||$q.platform.is.mobile){
                                openHelperByUserOperate(e, true);
                              }
                            }
                            
                            e&&e.stopPropagation();
                            e&&e.preventDefault();
                            return false
                          }}
                          onFocus={e => {

                            if (!($q.screen.xs||$q.platform.is.mobile)) {
                              if(!isOpening.value){
                                let rules = mappingProps.rules;
                                mappingProps.rule=[]
                               openHelperByUserOperate(e, true,true);
                               setTimeout(() => {
                                 mappingProps.rules=rules
                               }, 100);
                              }
                              
                             
                            }
                            e&&e.stopPropagation();
                            e&&e.preventDefault();
                            return false;
                          }}
                          onBlur={() => {
                            if (flagFromClick) {
                              return;
                            }
                            isFocus.value = false;
                            // filter.value = '';
                          }}
                        />,
                      );
                    }
                    return Template;
                  })()}
                </span>
              );
            },
            default: () => {
              return (
                !mappingProps.isDev &&
                !mappingProps.readonly &&
                isCurrentHelper.value &&
                renderContent()
              );
            },
            append: () => {
              if (mappingProps.readonly) {
                if (initMask()&&sysHasMaskAuth()) {
                  return (
                    <span class='fas-label-mask custom'>
                      <i
                        class={
                          !isMasked.value
                            ? 'dx-icon fas icon-t-mask-open'
                            : 'dx-icon fas icon-t-mask-close'
                        }
                        style={'font-size:14px'}
                        onClick={(e)=>{
                          maskIconClick()
                          e.stopPropagation()
                          e.preventDefault()
                          return false
                        }}
                      ></i>
                    </span>
                  );
                }
                return ''
              };
              if(mappingProps.columnarPattern&&refDropComponent?.value?.isShow&&filter.value){
                return <i onClick={(e)=>{
               filter.value=''
                e.stopPropagation()
                e.preventDefault()
              return false
              }} class={'fas dx-icon icon-t-close-circle'} style={'color:rgba(0,0,0,.24);cursor:pointer;font-size:12px'}></i>
              }
              if (
                mappingProps.icon &&
                mappingProps.icon.indexOf('fas dx-icon') != -1
              ) {
                return <i   onClick={e => {
                  window.selectHelperList&&window.selectHelperList[
                    mappingProps.instanceCode
                  ]&&(window.selectHelperList[
                    mappingProps.instanceCode
                  ].value = false);
                  if(mappingProps.columnarPattern&&mappingProps.multiple&&!($q.screen.xs||$q.platform.is.mobile)){
                    openHelperByUserOperate(refField.value?.$el.querySelector('input'), true,true)
                    return
                  }
                  openHelperByUserOperate(e, true);
                  e.stopPropagation();
                  e.preventDefault();
                  return false;
        
                }} style={`font-size:${!($q.screen.xs || $q.platform.is.mobile) ? '10px' : '14px'}`} class={mappingProps.icon}></i>;
              } else {
                return (
                  <i
                    onClick={e => {
                      window.selectHelperList &&
                        window.selectHelperList[mappingProps.instanceCode] &&
                        (window.selectHelperList[
                          mappingProps.instanceCode
                        ].value = false);
                        if(mappingProps.columnarPattern&&mappingProps.multiple&&!($q.screen.xs||$q.platform.is.mobile)){
                          openHelperByUserOperate(refField.value?.$el.querySelector('input'), true,true)
                          return
                        }
                        openHelperByUserOperate(e, true);
                        e.stopPropagation();
                        e.preventDefault();
                        return false;
                
                    }}
                    style={`font-size:14px;    color: rgba(0, 0, 0, .56);font-size:${!($q.screen.xs || $q.platform.is.mobile) ? '10px' : '14px'};transform:${!($q.screen.xs || $q.platform.is.mobile) ? ' rotate(0deg);' : ' rotate(270deg);'}`}
                    class={`${TComponents?.IconList?.common??'fas dx-icon'} ${TComponents?.IconList?.arrowDown??'icon-t-arrow-down'}`}
                  ></i>
                );
              }
            },
          }}
        </t-input>

        // <span>11111</span>
      );
    };
  },
});
